<template>
	<Page title="徽章系统" icon="/static/svg/huiz.svg"></Page>


	<view class="stats-container">
		<view class="stat-item">
			<up-image src="/static/svg/all-badge.svg" width="34px" height="34px"></up-image>
			<view class="font-lg font-weight-bold up-m-t-15">24</view>
			<view class="stat-label up-m-t-6">总徽章</view>
		</view>
		<view class="stat-item">
			<up-image src="/static/svg/get-badge.svg" width="34px" height="34px"></up-image>
			<view class="font-lg font-weight-bold up-m-t-15">24</view>
			<view class="stat-label up-m-t-6">已获得</view>
		</view>
		<view class="stat-item">
			<up-image src="/static/svg/ing-badge.svg" width="34px" height="34px"></up-image>
			<view class="font-lg font-weight-bold up-m-t-15">12</view>
			<view class="stat-label up-m-t-6">进行中</view>
		</view>
	</view>
	<view class="category-tabs">
		<BadgeSearchItem title="全部" icon="&#xe641;" active :num="12"></BadgeSearchItem>
		<BadgeSearchItem title="里程" icon="&#xe617;"></BadgeSearchItem>
		<BadgeSearchItem title="活动" icon="&#xe602;"></BadgeSearchItem>
		<BadgeSearchItem title="社交" icon="&#xe626;"></BadgeSearchItem>
		<BadgeSearchItem title="成就" icon="&#xe671;"></BadgeSearchItem>
	</view>
	<view class="badge-content">
		<BadegeItem />
		<BadegeItem />
		<BadegeItem />
		<BadegeItem />
	</view>

</template>

<script setup>
	import Page from '@/components/Page.vue';
	import BadgeSearchItem from '@/components/BadgeSearchItem.vue';
	import BadegeItem from '@/components/BadegeItem.vue';
</script>

<style scoped lang="scss">
	.stats-container {
		padding: 16px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;

		.stat-item {
			padding: 16px 12px;
			flex-direction: column;
			text-align: center;
			background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
			border-radius: 20px;
			display: flex;
			align-items: center;
			border: 1px solid rgba(148, 163, 184, 0.08);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;

			.stat-label {
				font-size: 10px;
				color: #64748b;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				opacity: 0.8;
			}
		}
	}

	.category-tabs {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 0 16px 24px;
	}

	.badge-content {
		padding: 0 16px 24px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 1200px;
		margin: 0 auto;
	}
</style>